<template>
  <div class="outSide">
    <div style="width: 100%; height: 60%" class="sc-display moreinfo">
      <span class="font24c">{{ textinfo.name }}</span>
    </div>
    <div style="width: 100%; height: 40%">
      <div style="width: 50%; height: 100%; float: left" class="sc-display">
        <img
          src="/imgs/classtext/icon-eye.png"
          style="height: 16px; width: 24px"
        />
        <span class="font14c">{{ textinfo.watch }}次</span>
      </div>
      <div style="width: 50%; height: 100%; float: right" class="sc-display">
        <img
          src="/imgs/classtext/icon-note.png"
          style="height: 18px; width: 20px"
        />
        <span class="font14c">{{ textinfo.talk }}次</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ClassText",
  props: {
    textinfo: Object
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.outSide {
  height: 80px;
  width: 240px;
}
</style>
